<template>
    <div class="editor-wrapper">
        <div class="editor-nav">

        </div>
        <!-- <div class="editor-input" contenteditable="true" ref="contentRef">{{getContent}}</div> -->
        <textarea cols="30" rows="10" placeholder="既然来了留下点什么..."
        class="editor-input"
        v-model="content"
        @change="handlChange"
        @keydown="handleKeydown"
        @keyup="handleKeyUp"
        ></textarea>
        <div class="editor-bottom">
            <span class="editor-tip">Enter 发送，Ctrl+Enter 换行</span>
            <div class="editor-send" :class="sendable ? '':'disable'" @click="handleSend">发送</div>
        </div>
    </div>
</template>

<script>
import useKeyboard from './use-keyboard'
export default {
  name: 'Editor',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['send', 'change'],
  setup(props, { emit }) {
    const { content, getContent, sendable, contentRef, handleKeydown, handleKeyUp, handleSend, handlChange } = useKeyboard(props, emit)

    return {
      contentRef,
      content,
      sendable,
      getContent,
      handlChange,
      handleKeydown,
      handleKeyUp,
      handleSend
    }
  }
}
</script>

<style lang="scss" scoped>
.editor {
  &-wrapper {
    height: 185px;
    box-sizing: border-box;
    background-color: $color-text-ll;
    padding: 0 16px;
  }
  &-input {
    font-size: 16px;
    width: 100%;
    height: 109px;
    box-sizing: border-box;
    color: $color-text-b;
    border: 0;
    outline: none;
    background-color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    overflow:hidden;
    resize:none;
    background: transparent;
  }
  &-nav {
    height: 40px;
    box-sizing: border-box;
  }
  &-bottom {
    text-align: right;
  }
  &-tip {
    font-size: 12px;
    color: #bbb;
    padding-right: 10px;
    -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  }
  &-send {
    display: inline-block;
    padding: 0 8px;
    font-size: 14px;
    background-color: $color-theme;
    color: #fff;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    cursor: pointer;
  }
  &-send.disable {
    opacity: 0.5;
  }
  &-send:not(.disable):hover {
    opacity: 0.85;
  }
}
</style>
